<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link active">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3">设计思想<a class="anchor" href="#%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3">§</a></h2>
<p>这篇指南是是用来解释React Router使用时的心智模型。我们将其称为“动态路由”，这与你可能更熟悉的“静态路由”完全不同。</p>
<h3 id="%E9%9D%99%E6%80%81%E8%B7%AF%E7%94%B1">静态路由<a class="anchor" href="#%E9%9D%99%E6%80%81%E8%B7%AF%E7%94%B1">§</a></h3>
<p>如果你使用过Rails，Express，Ember，Angular等框架，那么你已经使用过了静态路由。 在这些框架中，当你在进行任何渲染之前，会将路由声明为应用初始化的一部分。React Router pre-v4在大多数情况下也是静态的。下面我们来看看如何在express中配置路由：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> Express Style routing<span class="token punctuation">:</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">,</span> handleIndex<span class="token punctuation">)</span><span class="token comment">;</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/invoices"</span><span class="token punctuation">,</span> handleInvoices<span class="token punctuation">)</span><span class="token comment">;</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/invoices/:id"</span><span class="token punctuation">,</span> handleInvoice<span class="token punctuation">)</span><span class="token comment">;</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/invoices/:id/edit"</span><span class="token punctuation">,</span> handleInvoiceEdit<span class="token punctuation">)</span><span class="token comment">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>请注意在应用监听请求之前是如何声明路由的。我们使用的客户端路由与其是相似当。在Angular中，你可以预先声明路由，然后在渲染之前将它们导入顶级AppModule中：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> Angular Style routing<span class="token punctuation">:</span>
<span class="token keyword">const</span> appRoutes<span class="token punctuation">:</span> Routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  {
    path<span class="token punctuation">:</span> <span class="token string">"crisis-center"</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> CrisisListComponent
  }<span class="token punctuation">,</span>
  {
    path<span class="token punctuation">:</span> <span class="token string">"hero/:id"</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> HeroDetailComponent
  }<span class="token punctuation">,</span>
  {
    path<span class="token punctuation">:</span> <span class="token string">"heroes"</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> HeroListComponent<span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> { title<span class="token punctuation">:</span> <span class="token string">"Heroes List"</span> }
  }<span class="token punctuation">,</span>
  {
    path<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
    redirectTo<span class="token punctuation">:</span> <span class="token string">"/heroes"</span><span class="token punctuation">,</span>
    pathMatch<span class="token punctuation">:</span> <span class="token string">"full"</span>
  }<span class="token punctuation">,</span>
  {
    path<span class="token punctuation">:</span> <span class="token string">"**"</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> PageNotFoundComponent
  }
<span class="token punctuation">]</span><span class="token comment">;</span>

@<span class="token function">NgModule</span><span class="token punctuation">(</span>{
  imports<span class="token punctuation">:</span> <span class="token punctuation">[</span>RouterModule<span class="token punctuation">.</span><span class="token function">forRoot</span><span class="token punctuation">(</span>appRoutes<span class="token punctuation">)</span><span class="token punctuation">]</span>
}<span class="token punctuation">)</span>
export class AppModule {}
</code></pre>
<p>Ember有一个常规的routes.js文件，在构建时会读取这个文件当内容并导入到应用中。这会在应用渲染前进行。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> Ember Style Router<span class="token punctuation">:</span>
Router<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  this<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">"about"</span><span class="token punctuation">)</span><span class="token comment">;</span>
  this<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">"contact"</span><span class="token punctuation">)</span><span class="token comment">;</span>
  this<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">"rentals"</span><span class="token punctuation">,</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    this<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">"show"</span><span class="token punctuation">,</span> { path<span class="token punctuation">:</span> <span class="token string">"/:rental_id"</span> }<span class="token punctuation">)</span><span class="token comment">;</span>
  }<span class="token punctuation">)</span><span class="token comment">;</span>
}<span class="token punctuation">)</span><span class="token comment">;</span>

export <span class="token keyword">default</span> Router<span class="token comment">;</span>
</code></pre>
<p>尽管API不同，但她们都遵循“静态路由”模型。React Router遵循这个模型直到v4。但是要成功使用React Router，你需要忘记这一切。</p>
<h3 id="%E8%83%8C%E6%99%AF">背景<a class="anchor" href="#%E8%83%8C%E6%99%AF">§</a></h3>
<p>坦率地说，我们React Router直到v2版本所采取的开发方向感到非常沮丧。 我们（Michael和Ryan）感觉现在采用的这种路由方式受限于API，我们正在重新实现React（生命周期等）的部分，并且它与React给我们创造UI的心智模型不匹配。当我们在研讨会之前在一家酒店的走廊互相讨论时。我们互相问道：“如果我们使用我们在之前讨论的模式构建路由会是什么样子？”开发只需要几个小时，我们就有了一个验证的概念，我们知道她是未来我们想要路由。 我们最终意识到API并不应该在React的“外部”，这是一个由React的其余部分组成并自然落实到位的API。我们认为你会喜欢她。</p>
<h3 id="%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1">动态路由<a class="anchor" href="#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1">§</a></h3>
<p>动态路由指的是在应用渲染时发生的路由，而不是在正在运行的应用之外配置或规定好的路由。这意味着几乎所有东西都是React Router中的一个组件。接下来看一下这个API是如何工作的：</p>
<p>首先，创建一个路由组件，将其渲染在应用的顶部。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> react<span class="token operator">-</span>native
import { NativeRouter } from <span class="token string">"react-router-native"</span><span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> react<span class="token operator">-</span>dom <span class="token punctuation">(</span>what we'll use here<span class="token punctuation">)</span>
import { BrowserRouter } from <span class="token string">"react-router-dom"</span><span class="token comment">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>BrowserRouter<span class="token operator">></span>
    <span class="token operator">&lt;</span>App <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span><span class="token punctuation">,</span>
  el
<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>接下来，创建一个链接组件将其链接到一个新的地址。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>nav<span class="token operator">></span>
      <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dashboard"</span><span class="token operator">></span>Dashboard<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>nav<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>最后，当用户查看‘/dashboard'路径时，渲染该路由并展示对应UI</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>nav<span class="token operator">></span>
      <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dashboard"</span><span class="token operator">></span>Dashboard<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>nav<span class="token operator">></span>
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/dashboard"</span> component<span class="token operator">=</span>{Dashboard} <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>Route将渲染&lt;Dashboard {... props} /&gt;，props是一些看起来像{match，location，history}这样的特定的路由的属性。如果用户不在‘/dashboard'路径下，那么Route将不渲染任何东西。这就是它的全部内容。</p>
<h3 id="%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">嵌套路由<a class="anchor" href="#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">§</a></h3>
<p>很多路由库都有一些“嵌套路由”的概念。如果你使用过React Router V4以前的版本，那么你就会知道我们也是这样做的。然而当你从静态路由配置移动到动态渲染路由时，该如何“嵌套路由”呢？</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>BrowserRouter<span class="token operator">></span>
    {<span class="token operator">/</span><span class="token operator">*</span> here's a div <span class="token operator">*</span><span class="token operator">/</span>}
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      {<span class="token operator">/</span><span class="token operator">*</span> here's a Route <span class="token operator">*</span><span class="token operator">/</span>}
      <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/tacos"</span> component<span class="token operator">=</span>{Tacos} <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> when the url matches `<span class="token operator">/</span>tacos` this component renders
<span class="token keyword">const</span> Tacos <span class="token operator">=</span> <span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">/</span><span class="token operator">/</span> here's a nested div
  <span class="token operator">&lt;</span>div<span class="token operator">></span>
    {<span class="token operator">/</span><span class="token operator">*</span> here's a nested Route<span class="token punctuation">,</span>
        match<span class="token punctuation">.</span>url helps us make a relative path <span class="token operator">*</span><span class="token operator">/</span>}
    <span class="token operator">&lt;</span>Route path<span class="token operator">=</span>{match<span class="token punctuation">.</span>url <span class="token operator">+</span> <span class="token string">"/carnitas"</span>} component<span class="token operator">=</span>{Carnitas} <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>如上代码，React Router并没有嵌套的API，Router仅仅是一个组件，就想一个普通的div一样。</p>
<h3 id="%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1">响应路由<a class="anchor" href="#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1">§</a></h3>
<p>设想一下用户导航到'/invoice'。你的应用需要适用于不同的尺寸的屏幕，当她们具有较窄的视口时，你只需向其显示发票列表和到发票详情的链接。她们可以导航到更深入的层级。</p>
<pre class="language-autoit"><code class="language-autoit">Small Screen
url<span class="token punctuation">:</span> <span class="token operator">/</span>invoices

<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |
|      Dashboard       |
|                      |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |
|      Invoice <span class="token number">01</span>      |
|                      |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |
|      Invoice <span class="token number">02</span>      |
|                      |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |
|      Invoice <span class="token number">03</span>      |
|                      |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |
|      Invoice <span class="token number">04</span>      |
|                      |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
</code></pre>
<p>在更大的屏幕上，我们会想要显示一个类别-详细内容的视图，其中导航位于左侧，详情或特定发票显示在右侧。</p>
<pre class="language-autoit"><code class="language-autoit">Large Screen
url<span class="token punctuation">:</span> <span class="token operator">/</span>invoices<span class="token operator">/</span>dashboard

<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |                           |
|      Dashboard       |                           |
|                      |   Unpaid<span class="token punctuation">:</span>             <span class="token number">5</span>   |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |   Balance<span class="token punctuation">:</span>   <span class="token variable">$53</span><span class="token punctuation">,</span><span class="token number">543.00</span>   |
|      Invoice <span class="token number">01</span>      |                           |
|                      |   Past Due<span class="token punctuation">:</span>           <span class="token number">2</span>   |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |                           |
|      Invoice <span class="token number">02</span>      |                           |
|                      |   <span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>   |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>   |                   |   |
|                      |   |  <span class="token operator">+</span>    <span class="token operator">+</span>     <span class="token operator">+</span>     |   |
|      Invoice <span class="token number">03</span>      |   |  | <span class="token operator">+</span>  |     |     |   |
|                      |   |  | |  |  <span class="token operator">+</span>  |  <span class="token operator">+</span>  |   |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>   |  | |  |  |  |  |  |   |
|                      |   <span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>   |
|      Invoice <span class="token number">04</span>      |                           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
</code></pre>
<p>现在暂停考虑一下两种屏幕尺寸的/invoice URL,她是大尺寸屏幕的有效路由吗？我们应该把右边的东西放在什么位置？</p>
<pre class="language-autoit"><code class="language-autoit">Large Screen
url<span class="token punctuation">:</span> <span class="token operator">/</span>invoices
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
|                      |                           |
|      Dashboard       |                           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |                           |
|      Invoice <span class="token number">01</span>      |                           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |                           |
|      Invoice <span class="token number">02</span>      |             <span class="token operator">?</span><span class="token operator">?</span><span class="token operator">?</span>           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |                           |
|      Invoice <span class="token number">03</span>      |                           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>                           |
|                      |                           |
|      Invoice <span class="token number">04</span>      |                           |
|                      |                           |
<span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">+</span>
</code></pre>
<p>在大屏幕上，'/invoice'不是有效的路线，但在小屏幕上她是有效的，更有趣的是，请考虑一个拥尺寸手机的人。她/他可以用横屏和竖屏两种方式来查看手机页面。突然间，我们有足够的空间来显示类别-详情这种UI，所以你应该立即重定向！</p>
<p>React Router在先前版本的静态路由并没有真正成功的答案。但是，当路由是动态的时，你可以声明性地重组这些功能。如果你开始考虑将路由作为UI而不是静态配置，那么你会写出以下代码：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>AppLayout<span class="token operator">></span>
    <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/invoices"</span> component<span class="token operator">=</span>{Invoices} <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>AppLayout<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>

<span class="token keyword">const</span> Invoices <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Layout<span class="token operator">></span>
    {<span class="token operator">/</span><span class="token operator">*</span> always show the nav <span class="token operator">*</span><span class="token operator">/</span>}
    <span class="token operator">&lt;</span>InvoicesNav <span class="token operator">/</span><span class="token operator">></span>

    <span class="token operator">&lt;</span>Media query<span class="token operator">=</span>{PRETTY_SMALL}<span class="token operator">></span>
      {screenIsSmall <span class="token operator">=</span><span class="token operator">></span>
        screenIsSmall <span class="token operator">?</span> <span class="token punctuation">(</span>
          <span class="token operator">/</span><span class="token operator">/</span> small screen has no redirect
          <span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/invoices/dashboard"</span> component<span class="token operator">=</span>{Dashboard} <span class="token operator">/</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/invoices/:id"</span> component<span class="token operator">=</span>{Invoice} <span class="token operator">/</span><span class="token operator">></span>
          <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
        <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
          <span class="token operator">/</span><span class="token operator">/</span> large screen does!
          <span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/invoices/dashboard"</span> component<span class="token operator">=</span>{Dashboard} <span class="token operator">/</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/invoices/:id"</span> component<span class="token operator">=</span>{Invoice} <span class="token operator">/</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Redirect from<span class="token operator">=</span><span class="token string">"/invoices"</span> <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/invoices/dashboard"</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
        <span class="token punctuation">)</span>
      }
    <span class="token operator">&lt;</span><span class="token operator">/</span>Media<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>Layout<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>当用户将手机从纵向旋转到横向时，此代码会自动将其重定向到详情页。该组有效路由将根据用户手中的移动设备的动态特性而改变。</p>
<p>这只是一个例子。我们还有许多其他问题可以讨论，我们总结一下规律：我们应该考虑组件，而不是静态路由。考虑如何使用React的声明可组合性来解决问题，因为几乎每个“React Router问题”都可能是“React问题”。</p></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3">设计思想</a><ol><li><a href="#%E9%9D%99%E6%80%81%E8%B7%AF%E7%94%B1">静态路由</a></li><li><a href="#%E8%83%8C%E6%99%AF">背景</a></li><li><a href="#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1">动态路由</a></li><li><a href="#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">嵌套路由</a></li><li><a href="#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1">响应路由</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/Philosophy.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>